{extend name="common/base" /}

{block name="body"} 
<div class="head_box">
    <i class="layui-icon layui-icon-left" data-btn="backNav" onclick="window.history.go(-1);"></i>
    <div class="t1">计划</div>
 </div>
 <main class="main_body">
    <div class="title_nav">
       <a class="active" href="/plan_add.html">添加计划</a>
       <a href="/plan_list.html">管理计划</a>
       <a href="/plan_today.html">今日计划</a>
    </div>
    <form class=" layui-form plan_add_form_box" onSubmit="return false">
       <div class="plan_add_form">

          <div class="form_item">
             <div class="label">吊车</div>
             <div class="b1">
                <select lay-verify="required" name="crane_id">
                   <!-- <option>请选择</option> -->
                   {volist name="carne_list" id="vo"} 
                        <option {if $detail.crane_id == $vo.id} selected {/if} value="{$vo.id}">{$vo.name}</option>
                   {/volist}
                </select>
             </div>
          </div>
        
          <div class="form_item">
             <div class="label">工程号</div>
             <div class="b1">
                <input name="produce_no" lay-verify="required" value="{$detail.produce_no}" class="layui-input" placeholder="请输入">
             </div>
          </div>
          <div class="form_item">
             <div class="label">分段号</div>
             <div class="b1">
                <input name="segment_type_no" lay-verify="required"  value="{$detail.segment_type_no}" class="layui-input" placeholder="请输入">
             </div>
          </div>
          <div class="form_item">
             <div class="label">分段类型</div>
             <div class="b1">
                <select  lay-verify="required" name="segment_type_id">
                   <!-- <option>请选择</option> -->
                   {volist name="segment_type_list" id="vo"} 
                         <option    {if $detail.segment_type_id == $vo.id} selected {/if} value="{$vo.id}">{$vo.name}</option>
                   {/volist}
                </select>
             </div>
          </div>
          <div class="form_item">
             <div class="label">阶段</div>
             <div class="b1">
                <select lay-verify="required" name="production_stage_id">
                   <!-- <option>请选择</option> -->
                   {volist name="production_stage_list" id="vo"} 
                         <option  {if $detail.production_stage_id == $vo.id} selected {/if} value="{$vo.id}">{$vo.name}</option>
                   {/volist}
                </select>
             </div>
          </div>
          <div class="form_item">
             <div class="label">计划起始时间</div>
             <input id="start_time" lay-verify="required" name="start_time" value="{$detail.start_time}" readonly placeholder="请选择" class="layui-input">
          </div>
          <div class="form_item">
            <div class="label">标准周期(小时)</div>
            <input id="circle" lay-verify="required" name="circle" type="number" value="{$detail.circle}" placeholder="标准周期" class="layui-input">
         </div>
          <div class="form_item">
             <div class="label">计划结束时间</div>
             <div class="b1">
                <input id="end_time" lay-verify="required" name="end_time" value="{$detail.end_time}" readonly placeholder="请选择" class="layui-input">
             </div>
          </div>
          <div class="form_item">
             <div class="label">备注</div>
             <div class="b1">
                <input class="layui-input" name="remarks" value="{$detail.remarks}" placeholder="请输入">
             </div>
          </div>
       </div>
       <button class="layui-btn w100" lay-submit lay-filter="submit_form">提交</button>
    </form>
 </main>
{/block}
{block name="js"}
<script>

    layui.use(['form', 'laydate', 'util'], function () {
       var form = layui.form;
       var layer = layui.layer;
       var laydate = layui.laydate;
       var util = layui.util;
 
       // 日期
       laydate.render({
        elem: '#start_time',
        type: 'datetime',
         format: 'yyyy-MM-dd HH:mm',
         done: function(value) {
               calculateEndTime(); // 每次选择时间后计算结束时间
         }
      });
      document.getElementById('circle').addEventListener('input', calculateEndTime);
      function calculateEndTime() {
        const startTime = document.getElementById('start_time').value; // 起始时间
        const cycleHours = parseFloat(document.getElementById('circle').value); // 周期（小时）

        if (startTime && !isNaN(cycleHours)) {
            // 将起始时间转为日期对象
            const startDate = new Date(startTime.replace(/-/g, '/')); // 替换 '-' 为 '/' 兼容性处理
            const endDate = new Date(startDate.getTime() + cycleHours * 3600000); // 添加小时

            // 格式化结束时间
            const formattedEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')} ${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}`;
            
            // 赋值到结束时间字段
            document.getElementById('end_time').value = formattedEndDate;
        }
    }
       form.on('submit(submit_form)', function(data){
            var field = data.field; // 获取表单字段值
    
            ajaxRequest('/plan_edit/'+{$detail.id}, field, 'POST', this, function (response) {
                layer.msg('编辑成功', {icon: 1, time: 1000}, function() {
                    // 弹窗消失后跳转
                    window.location.href = '/plan_list'; // 替换为目标页面的 URL
                });
            });
            return false; // 阻止默认 form 跳转
        });
    });
 </script>
{/block}

